<template>
	<div class="change-password flex flex-col md:flex-row p-5 bg-bg-1 rounded-lg">
		<div class="flex-auto">
			<div class="mb-2 text-lg">{{ $t('settings.security.changePassword') }}</div>
			<BaseTip textT="settings.security.changePasswordDesc" />
		</div>
		<BaseButton
			class="mt-5 md:mt-0"
			type="primary"
			:block="!isDesktop"
			textT="settings.security.changePasswordBtn"
			@click="profileStore.show.updatePassword = true" />
	</div>
</template>

<script setup lang="ts">
import { BaseButton, BaseTip } from '@/components/base'
import { isDesktop } from '@/hooks'
import { useProfileStore } from '@/store'

const profileStore = useProfileStore()
</script>

<style scoped></style>
